<template>
   <el-row class="login-container"  :align="middle"> 
    <!-- //justify="center" -->
    <el-card style="max-width: 400px;"
    class="el-card">
        <template #header>
            <div class="card-header">
                <img :src="imgUrl" alt="">
            </div>
        </template>
        <div class="jump-link">
            <el-link type="primary" @click="handlechange">{{ formtype ?'返回登录':'注册账号' }}</el-link>
        </div>
        <el-form 
        ref="loginFormref" 
        :model="loginform" style="max-width: 580px;" 
        class="formrule"
        :rules="rules">
        <el-form-item prop="userName">
            <el-input v-model="loginform.userName" placeholder="手机号" :prefix-icon="UserFilled"></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
            <el-input v-model="loginform.passWord" type="password" placeholder="密码" :prefix-icon="Lock"></el-input>
        </el-form-item>
        <el-form-item v-if="formtype" prop="validCode">
            <el-input v-model="loginform.validCode"  placeholder="验证码" :prefix-icon="Lock">
                <template #append>
                <span @click="countdownchange">{{ countdown.validText }}</span>
            </template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :style="{width:'100%'}" @click="submitform(loginFormref)">
                {{ formtype?'注册账号':'登录' }}
            </el-button>
        </el-form-item>
        </el-form>
    </el-card>
   </el-row>
   
</template>

<script setup>
import {ref,reactive} from 'vue'
import {getCode,userAuthentication,login} from '../../api'
import {ElMessage} from 'element-plus'
import {UserFilled,Lock} from '@element-plus/icons-vue'
// 切换表单 0登录 1注册
const formtype=ref(0)
const imgUrl=new URL('../../../public/bg.jpg',import.meta.url).href
// 点击切换登录和注册
const loginform=reactive({
    userName:'',
    passWord:'',
    validCode:''
})
const handlechange=() =>{
formtype.value=formtype.value ?0:1
}
// 账号校验规则
const validateUser=(rule,value,callback)=>{
// 不能为空
    if(value ===''){
        callback(new Error('请输入账号'))
    }else{//账号校验
         const phoneReg= /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
         phoneReg.test(value)?callback():callback(new Error('手机号格式错误，请输入正确手机号'))
    }
}
// 密码校验规则
const validatePass=(rule,value,callback)=>{
// 不能为空
    if(value ===''){
        callback(new Error('请输入密码'))
    }else{ //密码校验
         const Reg= /^[a-zA-z0-9_-]{4,16}$/
         Reg.test(value)?callback():callback(new Error('密码错误，请重新输入'))
    }
}
// 表单校验
const rules=reactive({
    userName:[{validator:validateUser,trigger:'blur'}],
    passWord:[{validator:validatePass,trigger:'blur'}],

})
// 发送短信
const countdown=reactive({
    validText:'获取验证码',
    time:60
})
let flag=false
const countdownchange=() =>{
    // 如果已发送不处理
    if(flag) return
    // 判断手机号是否正确(格式)
    const phoneReg= /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if(!loginform.userName || !phoneReg.test(loginform.userName)){
        return  ElMessage({
        message: '请检查手机号是否正确',
        type: 'warning',
  })
    }
    // 倒计时
const time = setInterval(()=>{
        if(countdown.time<=0){
            countdown.time=60
            countdown.validText=`获取验证码`
            flag=false
            clearInterval(time)
        }else{
            countdown.time-=1
            countdown.validText=`剩余${countdown.time}s`
        }
       
    },1000)
    flag=true
    // 发送验证码
    getCode({tel:loginform.userName}).then(({data}) => {
        if(data.code === 10000){
            ElMessage.success('验证码发送成功')
        }
    })
}
// 表单提交
const submitform=async(formEl)=>{
    if (!formEl) return
    //手动触发校验
    await formEl.validate((valid,fields) => {
        if(valid){
            //注册页面
            if(formtype.value){
                userAuthentication(loginform).then(({data}) => {
                    if(data.code === 10000){
                        ElMessage.success('注册成功,请登录')
                        formtype.value=0
                    }
                })
            }else{
            //登录页面
            login(loginform).then(({data}) => {
                if(data.code === 10000){
                ElMessage.success('登录成功!')
                console.log(data)
                }
            })
        }
        }
        else{
            console.log('error submit!',fields)
            }
            })
            
}
</script>

<style lang="less" scoped>
:deep(.el-card_header){
    padding: 0;
} 
.login-container{
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(ims.png);
    justify-content: center;
    // position: relative;
    .el-card{
        height: 70%;
        // position: relative;
    }
    .card-header{
        background-color:#899fe1;
        img{
            // border-radius: 40px;
            width:310px;
            height: 180px;
        }
    }
    .jump-link{
        text-align: right;
        margin-bottom: 10px;
    }
    // .formrule{
       
    // }
    

}
</style>